<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的</title>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no, email=no" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait">
		<meta name="full-screen" content="true" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	</head>
	<style>
		body{
			background: #F5F5F5;
			width: 100%;
			height: 100%;
			padding-bottom: 100px;
			font-family: "微软雅黑";
		}
		.header{
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			background: url(img/backgroundme.jpg) no-repeat;
		}
		.header .top{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #CCC;	
			position: relative;
		}
		.header h1{
			font-size: 20px;
			color: #fff;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/backwhite.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		.header .title{
			text-align: center;
		}
		.header .title .pic{
			background-image: url(img/noportrait.png);
			width: 68px;
			height: 68px;
			background-size: 68px;
			margin:  10px auto;
		}
		.header .title .login{
			font-size: 18px;
			padding-bottom: 15px;
			color: #fff;
			font-weight: bold;
		}
		.header .title .login a{
			color: #fff;
			font-size: 18px;
			margin: 20px;
		}
		.list{
			margin:10px 0;
		}
		.list1{
			width: 100%;
			padding: 10px 0px;
			background: #fff;
			border-bottom: 1px solid #ccc;
		}
		.list1_1{			
			width: 90%;
			margin: 0 auto;
			height: 30px;
			line-height: 30px;
		}
		.list1_1 span{
			font-size: 16px;
			color: #666;
		}
		.list1_1 span:nth-of-type(1){
			display: block;
			width: 30px;
			height: 30px;
			background: url(img/qiandao.png) center no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin-right: 10px;
		}
		.list1_1 span:nth-of-type(3){
			display: block;
			width: 30px;
			height: 30px;
			background: url(img/advance_bg.png) center no-repeat;
			background-size: contain;
			vertical-align: middle;
			margin-right: 10px;
		}
		.list1 .list1_2 span:nth-of-type(1){
			background: url(img/xiazai.png) center no-repeat;
			background-size: contain;
		}
		.list1 .list1_3 span:nth-of-type(1){
			background: url(img/gouwuche.png) center no-repeat;
			background-size: contain;
		}
		.list1 .list1_4 span:nth-of-type(1){
			background: url(img/shouchang.png) center no-repeat;
			background-size: contain;
		}
		.list1 .list1_5 span:nth-of-type(1){
			background: url(img/vip.png) center no-repeat;
			background-size: contain;
		}
		.list1 .list1_6 span:nth-of-type(1){
			background: url(img/bangzhu.png) center no-repeat;
			background-size: contain;
		}
		.list2{
			width: 100%;
			padding: 10px 0px;
			background: #fff;
		}
		.list1_7 span:nth-of-type(1){
			background: url(img/guanyu.png) no-repeat;
			background-size: contain;
		}
		.bottomBar{			
			width: 100%;
			height: 60px;
			padding-top: 10px;
			position: fixed;
			left: 0px;
			bottom: 0px;
			background: #fff;
			border-top: 1px solid #ccc;
			box-shadow:2px 2px 3px #cfcfcf;
			-moz-box-shadow:2px 2px 3px #cfcfcf;
			-webkit-box-shadow:2px 2px 3px #cfcfcf;
		}
		.bottomBar ul li{
			float: left;
			width: 25%;
			text-align: center;
			font-size: 14px;
		}
		.bottomBar ul li a{
			color: #666;
		}
		.bottomBar ul li a:hover{
			text-decoration: none;
		}
		.bottomBar li span{
			display: inline-block;
			width: 30px;
			height: 30px;	
					
		}
	
		.bottomBar li:nth-of-type(1) span{
			background: url(img/faxian2.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(2) span{
			background: url(img/fenshu.png) no-repeat  ;	
			background-size: contain;		
		}
		.bottomBar li:nth-of-type(3) span{
			background: url(img/sech.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(4) span{
			background: url(img/wode2.png) no-repeat;	
			background-size: contain;		
		}
		.p_color{
			color: #39C764;
		}		
	</style>
	<body>
		<div class="header">
			<div class="top">
				<h1>我的</h1>
				<!--<div class="backicon" onclick="location.href = 'index.html';return false;"><span></span></div>-->
			</div>
			<div class="title">
				<div class="pic"></div>
				<div class="login">
					<a href="#" onclick="location.href = 'register.html';return false;">注册</a> | <a href="#">登录</a>
				</div>
			</div>
		</div>
		<div class="list">
			<div class="list1 ">
				<div class="list1_1 clearfix">
					<span class="fl"></span>
					<span class="fl">签到</span>
					<span class="fr"></span>
				</div>			
			</div>
			<div class="list1 ">
				<div class="list1_1 list1_2 clearfix">
					<span class="fl"></span>
					<span class="fl">我的收藏</span>
					<span class="fr"></span>
				</div>			
			</div>
			<div class="list1 ">
				<div class="list1_1 list1_3 clearfix">
					<span class="fl"></span>
					<span class="fl">我的下载</span>
					<span class="fr"></span>
				</div>			
			</div>
		</div>						
		<div class="list1 ">
			<div class="list1_1 list1_4 clearfix" onclick="location.href = 'gouwuche.html';return false;">
				<span class="fl"></span>
				<span class="fl">我的购物车</span>
				<span class="fr"></span>
			</div>			
		</div>
		<div class="list1 ">
			<div class="list1_1 list1_5 clearfix">
				<span class="fl"></span>
				<span class="fl">我的VIP</span>
				<span class="fr"></span>
			</div>			
		</div>
		<div class="list1 ">
			<div class="list1_1  list1_6 clearfix">
				<span class="fl"></span>
				<span class="fl">帮助与反馈</span>
				<span class="fr"></span>
			</div>			
		</div>
		<div class="list2 ">
			<div class="list1_1 list1_7 clearfix">
				<span class="fl"></span>
				<span class="fl">关于</span>
				<span class="fr"></span>
			</div>			
		</div>


		<!--底部导航-->
		<div class="bottomBar">
			<ul>
				<li><a href="#" onclick="location.href = 'index.html';return false;"><span class="clickStyles"></span><p >发现</p></a></li>
				<li><a href="#" onclick="location.href = 'class.html';return false;"><span></span><p>分类</p></a></li>
				<li><a href="#" onclick="location.href = 'search.html';return false;"><span></span><p>搜索</p></a></li>
				<li><a href="#" onclick="location.href = 'me.html';return false;"><span></span><p class="p_color">我的</p></a></li>
			</ul>
		</div>
		
	</body>
</html>
